<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="robots" content="noindex, nofollow"/>
    <meta name="googlebot" content="noindex, nofollow"/>
    <title>reactBase - JSRUN 驱动</title>
    <script type="text/javascript" src="" ></script>

    <script type="text/javascript" src="http://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

    <script type="text/javascript" src="http://cdn.bootcdn.net/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.staticfile.org/antd/3.23.6/antd.min.css"/>
    <script type="text/javascript" src="http://unpkg.com/antd@3.19.3/dist/antd.min.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/react-router-dom/4.4.0-beta.6/react-router-dom.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/ming_mock@2.0.10/index.js"></script>
    <script>
        const { Affix, Anchor, AutoComplete, Alert, Avatar, BackTop, Badge, Breadcrumb, Button, Calendar, Card, Collapse, Carousel, Cascader, Checkbox, Col, DatePicker, Divider, Dropdown, Form, Icon, Input, InputNumber, Layout, List, LocaleProvider, message, Menu, Modal, notification, Pagination, Popconfirm, Popover, Progress, Radio, Rate, Row, Select, Slider, Spin, Steps, Switch, Table, Transfer, Tree, TreeSelect, Tabs, Tag, TimePicker, Timeline, Tooltip, Mention, Upload, version } = antd;
        const {Children,Component,Fragment,Profiler,PureComponent,StrictMode,Suspense,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,cloneElement,createContext,createElement,createFactory,createRef,forwardRef,isValidElement,lazy,memo,useCallback,useContext,useDebugValue,useEffect,useImperativeHandle,useLayoutEffect,useMemo,useReducer,useRef,useState}=React;
    </script>
</head>
<body>
<div id="root"></div>
</div>

</body>
</html>

<script>
    app.begin((req,res)=>{

        console.log("app.begin",req.url,req.params)

    })


    app.get("/parentTablelist",async (req,res)=>{
        const dataSource = [
            {
                id: 1,
                name: '胡彦斌',
                age: 32,
                address: '西湖区湖底公园1号',
            },
            {
                id: 2,
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            },
        ];
        res.send({dataList:dataSource,total:14})
    })


    app.get("/childTablelist",async (req,res)=>{
        let pid= req.params.pid;
        if(pid==1){
            res.send({dataList:[ {
                    id: 1,
                    name: '胡彦斌1',
                }],total:14})

        }else {
            res.send({dataList:[ {
                    id: 2,
                    name: '胡彦祖2',
                }],total:14})

        }
    })

</script>




<script type="text/babel">

    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        },
    ];


    class UserList extends React.Component{

        constructor(props) {
            super(props);
            this.keyWordsRefContent=""
        }



        state={
            dataSource:[],
            lineTabData:[],
            pagination: {   //搜索参数
                current: 1,
                pageSize: 30,
                keywords: '',
                order: '',
                filter: {},
                total: 0,
                showSizeChanger: true,
                pageSizeOptions: ['1','50','100','500'],
                onShowSizeChange: (current, pageSize) => {
                    const { pagination } = this.state;
                    pagination.pageSize = pageSize;
                    this.setState({
                        pagination
                    });
                },
            },
            selectedRowKeys: [],
            selectedRows: [],
        }

        async componentDidMount() {
            this.fetch();
        }


        async fetch(){
            let keywords=this.state.pagination.keywords;
            let r= await MIO.parentTablelist({keywords:keywords})
            this.setState({dataSource:r.dataList})
        }

        onExpand =async (expanded, record) => {
            let childrenList=await MIO.childTablelist({pid:record.id});
            this.setState({
                lineTabData: {
                    ...this.state.lineTabData,
                    [record.id]: childrenList.dataList ,
                }
            })
        }

        expandedRowRender(record) {
            const columns = [
                { title: '儿子', dataIndex: 'name', key: 'name', width: 150 },
            ];
            return (
                <Table
                    columns={columns}
                    dataSource={this.state.lineTabData[record.id]}
                    pagination={false}
                />
            )

        }


        handleTableChange(pagination){
            this.state.pagination.current=pagination.current;
            this.setState({
                pagination: this.state.pagination
            },() => {
                console.log(this.state.pagination)
            });
        }

        rowSelection = () => {
            const { selectedRowKeys } = this.state;
            return {
                selectedRowKeys,
                onChange: (selectedRowKeys, selectedRows) => {
                    this.setState({
                        selectedRowKeys,
                    });
                },
                getCheckboxProps: record => ({
                    name: record.id+"",
                }),
                onSelect: (record, selected, selectedRows, nativeEvent) => {
                    let { selectedRows: globalSelectedRows } = this.state;
                    if (selected) {
                        if (globalSelectedRows.length === 0) {
                            globalSelectedRows.push(record);
                        } else {
                            for (let i = 0; i < globalSelectedRows.length; i++) {
                                const items = globalSelectedRows[i];
                                if (items.id != record.id && i === globalSelectedRows.length - 1) {
                                    globalSelectedRows.push(record);
                                }
                            }
                        }
                    } else {
                        globalSelectedRows = globalSelectedRows.filter(items => items.id != record.id);
                    }
                    this.setState({
                        selectedRows: globalSelectedRows,
                    });
                },
                onSelectAll: (selected, selectedRows, changeRows) => {
                    let { selectedRows: globalSelectedRows, selectedRowKeys } = this.state;
                    const keyArr = changeRows.map(items => items.id);
                    if (selected) {
                        selectedRowKeys = [...selectedRowKeys, ...keyArr];
                        globalSelectedRows = [...globalSelectedRows, ...changeRows];
                    } else {
                        selectedRowKeys = selectedRowKeys.filter(key => keyArr.indexOf(key) === -1 );
                        globalSelectedRows = globalSelectedRows.filter(items => keyArr.indexOf(items.id) === -1 );
                    }
                    this.setState({
                        selectedRowKeys,
                        selectedRows: globalSelectedRows,
                    });
                }
            }
        }



        handleSearch(v){
            let pagination = this.state.pagination;
            pagination.keywords = this.keywordsRef.state.value;
            pagination.current = 1;
            this.setState({
                pagination,
                selectedRowKeys: [],
                selectedRows: [],
            },() => {
                this.fetch()
            });
        }

        render(){
            return(
                <div>
                    <Input style={{width: 100}} ref={el=>this.keywordsRef =el}></Input> <Button  onClick={this.handleSearch.bind(this)}>搜索</Button>
                    <Table
                        rowKey={(record, index) => record.id}
                        dataSource={this.state.dataSource}
                        columns={columns}
                        pagination={this.state.pagination}
                        expandedRowRender={(record)=>this.expandedRowRender(record)}
                        onExpand={(expanded,record)=>this.onExpand(expanded,record)}
                        onChange={this.handleTableChange.bind(this)}
                        rowSelection={this.rowSelection()}
                    />

                </div>

            )

        }

    }


</script>



<script src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-595944e4-d01b-400f-ba49-6e7485e81a71/5ab5a9f2-5916-4804-96e8-3ac69851acfc.jsx" type="text/babel"></script>

